<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link href="css/bootstrap.css" rel="stylesheet">
		<link href="css/layui.css" rel="stylesheet">
		<link href="css/layui.mobile.css" rel="stylesheet">
		<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/styles.css">
		<title>小组-大学课堂评价系统</title>


		<style>
			a:hover{text-decoration:none;}
        a.active{text-decoration:none;}
        html,body{height: 100%;margin: 0;}
        .row{margin-bottom: 10px}

        body{background: #f9f9f9;font-family: -apple-system,"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;}


        @font-face {
            font-family: "lantingxihei";
            src: url("fonts/FZLTCXHJW.TTF");
        }

		/* 导航栏 */
		.header {
			background-color: #DEDEDE;
		}
		.container {
			padding-right: 40px;
			padding-left: 40px;
		}
		.navbar-nav{
			margin-left: 20px;
		}
		
        /* modal 模态框*/
        #invite-user .modal-body {
            overflow: hidden;
        }
        #invite-user .modal-body .form-label {
            margin-bottom: 16px;
            font-size:14px;
        }
        #invite-user .modal-body .form-invite {
            width: 80%;
            padding: 6px 12px;
            background-color: #eeeeee;
            border: 1px solid #cccccc;
            border-radius: 5px;
            float: left;
            margin-right: 10px;
        }
        #invite-user .modal-body .msg-modal-style {
            background-color: #7dd383;
            margin-top: 10px;
            padding: 6px 0;
            text-align: center;
            width: 100%;
        }
        #invite-user .modal-body .modal-flash {
            position: absolute;
            top: 53px;
            right: 74px;
            z-index: 999;
        }
        /* end modal */

        .en-footer {
            padding: 30px;
            text-align: center;
            font-size: 14px;
        }
		/* fenzuxinxi */
		.panel {
			margin-bottom: 10px;
		}
		.table {
			margin-bottom: 0px;
		}
    </style>
	</head>

	<body>
		<jsp:include page="top.jsp"/>
		<div class="container layout layout-margin-top">
			<ul class="nav nav-tabs" role="tablist">
				<%if(null != session.getAttribute("SESSION_TEACHER")){%>
				<li role="presentation" class="active"><a href="#manage" aria-controls="manage" role="tab" data-toggle="tab">小组管理</a></li>
				<li role="presentation"><a href="#groups" aria-controls="groups" role="tab" data-toggle="tab">分组信息</a></li>
				<%}else{%>
				<li role="presentation" class="active"><a href="#groups" aria-controls="groups" role="tab" data-toggle="tab">分组信息</a></li>
				<%}%>
			</ul>
			<div class="tab-content">
			
			
			<%if(null != session.getAttribute("SESSION_TEACHER")){%>
				<div role="tabpanel" class="tab-pane active" id="manage">
					<!--中心-->
					<div class="row">
				<div class="col-md-7">
							<div class="panel panel-success">
								<!-- Default panel contents -->
								<div class="panel-heading">学生信息</div>
								<!-- Table -->
								<table class="text-center table table-hover table-striped">
									<!-- On rows -->
									<thead>
										<tr>
											<th>序号</th>
											<th>姓名</th>
											<th>年级</th>
											<th>学号</th>
											<th>所在小组</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<c:forEach items="${requestScope.studentList }" var="s" varStatus="status">
										<tr class="tr${status.count}">
											<td>${status.count}</td>
											<td class="studentName">${s.studentName}</td>
											<td class="classYear">${s.gclass.classYear}级</td>
											<td class="studentID">${s.studentID}</td>
											<td class="className">${s.ggroup.groupName}</td>
											<td>
												<a style="cursor:pointer" onclick="add(${status.count})"><span class="glyphicon glyphicon-plus"></span></a>
											</td>
										</tr>
										</c:forEach>
									</tbody>
								</table>
							</div>
							
					<!--分页-->
			<div class="text-center">
					<nav aria-label="Page navigation">
							<ul class="pagination">
									<c:choose>
									<c:when test="${pagination.isHasPreviousPage() eq true}">
										<li>
										<a href="GroupInfoServlet?action=info&pageNo=${pagination.pageNo - 1}" aria-label="Previous">
										</c:when>
										<c:when test="${pagination.isHasPreviousPage() eq false}">
										<li class="disabled">
										<a aria-label="Previous">
										</c:when>
									</c:choose>
										<span aria-hidden="true">上一页</span>
										</a>
									</li>
									<c:forEach var="i" begin="1" end="${pagination.totalPages}" varStatus="status">
										<li><a href="GroupInfoServlet?action=info&pageNo=${status.count}">${status.count}</a></li>
									</c:forEach>
									
									<c:choose>
									<c:when test="${pagination.isHasNextPage() eq true}">
										<li>
										<a href="GroupInfoServlet?action=info&pageNo=${pagination.pageNo + 1}" aria-label="Previous">
										</c:when>
										<c:when test="${pagination.isHasNextPage() eq false}">
										<li class="disabled">
										<a aria-label="Previous">
										</c:when>
									</c:choose>
										<span aria-hidden="true">下一页</span>
										</a>
									</li>
							</ul>
					</nav>
			</div><!--分页-->
				</div>
				<div class="col-md-5">
				
				
				<form action="StudentInfoServlet" method="post">
				<input type="hidden" name="action" value="updateGroup" >
							<div class="panel panel-success">
								<!-- Default panel contents -->
								<div class="panel-heading groupinput">
									<div class="input-group input-group">
										<span class="input-group-addon" id="sizing-addon1">小组编号</span>
										<input type="text" name="groupID" class="form-control" style="width: 84%" placeholder="GroupNo" aria-describedby="sizing-addon1">
										<div class="btn-group" role="group" aria-label="...">
  											<button type="submit" class="btn btn-default">提交</button>
										</div>
									</div>
								</div>
								<!-- Table -->
								<table class=" text-center table table-hover table-striped">
									<!-- On rows -->
									<thead>
										<tr>
											<th>姓名</th>
											<th>年级</th>
											<th>学号</th>
											<th>所在小组</th>
										</tr>
									</thead>
									<tbody class="groupTable">
										<tr class="glosss">
											<td colspan="4" style="color:#989393">请在左侧选择要添加到小组的学生。<td>
										</tr>
									</tbody>
								</table>
							</div>
				</form>
				</div>
			</div>
					<!--中心-row-->
				</div>
			<%}%>	
				
				<%if(null != session.getAttribute("SESSION_TEACHER")){%>
				<div role="tabpanel" class="tab-pane" id="groups">
				<%}else{%>
				<div role="tabpanel" class="tab-pane active" id="groups">
				<%}%>
					<div class="row">
					
					
						<c:forEach items="${requestScope.groupList }" var="g" varStatus="status">
						<c:if test="${g.groupID ne 999}">
						<div class="col-md-4">
							<div class=" cate-con">
								<div class="layui-card-body">
									<div class="panel panel-success">
									<!-- Default panel contents -->
										<div class="panel-heading">
											<h3>第<span>${g.groupID}</span>组：${g.groupName}</h3>
										</div>
										<table class=" text-center table table-striped">
										<thead>
											<th>学号</th>
											<th>姓名</th>
										</thead>
										<tbody>
										<c:forEach items="${g.studentList }" var="s" varStatus="status">
											<tr>
												<td>${s.studentID}</td>
												<td>${s.studentName}</td>
											</tr>
										</c:forEach>
										</tbody>
									</table>
									</div>
									
								</div>
							</div>
						</div>
						</c:if>
						</c:forEach>



					</div>
				</div>
			</div>
		</div>
		<!--container-->
		<div class="modal fade" id="sign-modal" tabindex="-1" role="dialog">
			<div class="modal-dialog modal-sm" role="document">
				<div class="modal-content">
					<button type="button" class="close-modal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<div class="modal-body">
						<ul class="nav nav-tabs" role="tablist">
							<li role="presentation" class="active">
								<a href="#signin-form" aria-controls="signin-form" role="tab" data-toggle="tab">登录</a>
							</li>
						</ul>
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="signin-form">
								<form action="/login" method="post">
									<div class="form-group">
										<div class="input-group">
											<div class="input-group-addon">
												<i class="fa fa-envelope" style="margin:0;"></i>
											</div>
											<input type="email" name="login" class="form-control" placeholder="请输入账户">
										</div>
									</div>
									<div class="form-group">
										<div class="input-group">
											<div class="input-group-addon">
												<i class="fa fa-lock" style="margin:0;"></i>
											</div>
											<input type="password" name="password" class="form-control" placeholder="请输入密码">
										</div>
									</div>
									<div class="form-inline verify-code-item" style="display:none;">
										<div class="form-group">
											<div class="input-group">
												<input type="text" name="captcha_v" class="form-control" placeholder="请输入验证码">
											</div>
										</div>
										<img class="verify-code" src="" source="https://www.shiyanlou.com/captcha.gif">
									</div>
									<div class="form-group remember-login">
										<input name="remember" type="checkbox" value="y"> 下次自动登录
										<a class="pull-right" href="../reset_password/index.html">忘记密码？</a>
									</div>
									<div class="form-group">
										<input class="btn btn-primary" name="submit" type="submit" value="登录">
									</div>
									<div class="form-group error-msg">
										<div class="alert alert-danger" role="alert"></div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
<jsp:include page="footer.jsp"/>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/layui.all.js"></script>
<Script>
function add(i){
	$(".glosss").remove();
	var studentID = $(".tr"+i+" .studentID").text();
	var studentName = $(".tr"+i+" .studentName").text();
	var classYear = $(".tr"+i+" .classYear").text();
	var className = $(".tr"+i+" .className").text();
	$(".tr"+i+"").remove();
	$(".groupTable").append('<tr><td>'+ studentName +'</td><td>'+classYear+'</td><td>'+studentID+'</td><td>'+className+'</td></tr>');
	$(".groupinput").append('<input type="hidden" name="studentID" value="'+ studentID +'">');
}
</Script>
</body>
</html>
